<template>

		<view class="content">

				<view>
				        <view class="inv-h-w">
				                <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">红包</view>
				                <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">礼品</view>
				        </view>
				        <view class="" v-show="Inv == 0">
						
								<!-- 红包1 -->
								<view class="bom" v-for="(item) in items" :key="item">
									<view class="nft">
										<view class="git">
											<image :src="item.img" mode=""></image>
										<text class="">优惠券</text>
											</view>	
											
										<view class="og">
												
												<view class="">优惠码：{{item.plan}}</view>
												<view class="">{{item.data}}</view>
										</view>
									</view>
										</view>
				        </view>
				        <view class="" v-show="Inv == 1">
				             <!-- 红包1 -->
				             <view class="bom" v-for="(item) in items" :key="item">
				             	<view class="nft">
				             		<view class="git">
				             			<image :src="item.img" mode=""></image>
				             		<text class="">优惠券</text>
				             			</view>	
				             			
				             		<view class="og">
				             			
				             				<view class="">优惠码：{{item.plan}}</view>
				             				<view class="">{{item.truedata}}</view>
				             		</view>
				             	</view>
				             		</view>
				        </view>
			
				</view>
		</view>

</template>

<script>
	
	export default {
	components:{},
		data() {
			return {
				  Inv:0,
				items:[
					{img:'../../images/5.png',plan:"ASUOEFDFJDN",data:"有效期:2022-2-23 23:34",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/5.png',plan:"ASUOEFDFJDN",data:"有效期:2022-2-23 23:34",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/6.png',plan:"ASUOEFDFJDN",data:"请致电：400-919-8555",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/7.png',plan:"ASUOEFDFJDN",data:"请致电：400-919-8555",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/7.png',plan:"ASUOEFDFJDN",data:"请致电：400-919-8555",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/7.png',plan:"ASUOEFDFJDN",data:"请致电：400-919-8555",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/7.png',plan:"ASUOEFDFJDN",data:"请致电：400-919-8555",truedata:"有效期2017-09-20 11:01:21"},
					{img:'../../images/7.png',plan:"ASUOEFDFJDN",data:"请致电：400-919-8555",truedata:"有效期2017-09-20 11:01:21"},
					],
					
			}
		},
		methods: {
		showimg(str){
			// 当点击showimg时showfoucs赋值给非showfoucs
			this.showfoucs=!this.showfoucs
		},
		// 选项
		changeTab(Inv){
			this.
		        that.navIdx = Inv;
		         
		},
		handleItemClick(e) {
		        console.log(e)
	
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 750rpx;
	height: 100%;
	background-color: #f2f2f2;
	topbar{
		width: 750rpx;
		height: 80rpx;
	}
	.hongbao{
		display: flex;
		width: 750rpx;
		height: 70rpx;
		line-height: 70rpx;
	justify-content: space-around;
		background-color: #fff
	}
	.bom{
		// width: 750rpx;
		// height: 300rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 30rpx;
		.nft{
			display: flex;
			flex-direction: row;
			position: relative;
			button{
				width: 160rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
				background-color: #8f8f8f;
				color: #fff;
				position: absolute;
				right: 40rpx;
				top:120rpx;
			}
			.git{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin:30rpx 0 30rpx  30rpx ;
			text{
				margin: 20rpx 0;
			}
			}
		.og{
			font-size: 30rpx;
			padding: 40rpx 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			button{
				display: flex;
				justify-content: center;
			}
			view{
				color: #8f8f8f;
				margin: 6rpx 0;
				font-size: 20rpx;
			}
		}
			image{
				width: 160rpx;
				height: 160rpx;
				
			}
		}
	}
}
.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
        .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
        .inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
        page{background-color: #F2F2F2;}
</style>
